import { Button, Space, Typography } from 'antd'
import { CloseOutlined, EditOutlined, SaveOutlined } from '@ant-design/icons'

import styles from './styles.module.less'

interface ICardHeaderEditProps {
  title: string
  edit: boolean
  save: () => void
  cancel: () => void
  openEdit: () => void
}

export const CardHeaderEdit = ({ title, edit, save, cancel, openEdit }: ICardHeaderEditProps) => {
  return (
    <div className={styles.header}>
      <Typography.Title level={5} style={{ marginBottom: 0 }}>
        {title}
      </Typography.Title>
      {edit ? (
        <Space>
          <Button type="default" size="small" onClick={cancel} icon={<CloseOutlined />}>
            取消
          </Button>
          <Button type="primary" size="small" onClick={save} icon={<SaveOutlined />}>
            保存
          </Button>
        </Space>
      ) : (
        <Button type="default" size="small" onClick={openEdit} icon={<EditOutlined />}>
          编辑
        </Button>
      )}
    </div>
  )
}
